<p>These datepickers use custom Date adapter that lets you use your own model implementation.
In this example we are converting from and to a JS native Date object</p>

<div class="row">
  <div class="col-6">
    <ngb-datepicker #d1 [(ngModel)]="model1" #c1="ngModel"></ngb-datepicker>

    <hr/>
    <button class="btn btn-sm btn-outline-primary" (click)="model1 = today">Select Today</button>
    <hr/>

    <pre>Model: {{ model1 | json }}</pre>
    <pre>State: {{ c1.status }}</pre>
  </div>

  <div class="col-6">
    <form class="form-inline">
      <div class="form-group">
        <div class="input-group">
          <input class="form-control" placeholder="yyyy-mm-dd"
                 name="d2" #c2="ngModel" [(ngModel)]="model2" ngbDatepicker #d2="ngbDatepicker">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" (click)="d2.toggle()" type="button">
              <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
            </button>
          </div>
        </div>
      </div>
    </form>

    <hr/>
    <button class="btn btn-sm btn-outline-primary" (click)="model2 = today">Select Today</button>
    <hr/>


    <pre>Model: {{ model2 | json }}</pre>
    <pre>State: {{ c2.status }}</pre>
  </div>

</div>
